export const topicDetailStyle = {
  loadingRoot: {
    display: 'flex',
    justifyContent: 'center',
    padding: 10,
  },
  containerRoot: {
    padding: 10,
  },
  header: {
    borderBottom: '1px solid lightgray',
    paddingBottom: 10,
  },
  container: {
    '& blockquote': {
      padding: '0 0 0 15px',
      margin: '0 0 20px',
      borderLeft: '5px solid #eee',
    },
    '& img': {
      maxWidth: '100%',
    },
  },
}

export const topicPrimaryStyle = theme => ({
  root: {
    display: 'flex',
    alignItems: 'center',
  },
  title: {
    color: '#555',
    flex: 1,
  },
  tab: {
    width: 36,
    height: 24,
    backgroundColor: theme.palette.accent[500],
    textAlign: 'center',
    color: '#fff',
    borderRadius: 3,
    marginRight: 10,
    fontSize: '12px',
  },
})

export const topicSecondaryStyle = {
  root: {
    display: 'flex',
    alignItems: 'center',
    paddingTop: 3,
    '& > span': {
      marginRight: 5,
      '&::before': {
        content: '"•"',
        paddingRight: 5,
      },
    },
  },
}
